<template>
  <div style="width: 100%; height: 100%;">
    <div class="grid-content bg-purple">
      <el-table :data="users" border style="width: 100%">
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="batchName" label="采集批次名称" width="180"></el-table-column>
        <el-table-column prop="collectionTime" label="采集时间" width="180">
          <template slot-scope="scope">
            {{ scope.row.collectionTime | formatDate }}
          </template>
        </el-table-column>
        <el-table-column prop="collector" label="采集员" width="180"></el-table-column>
        <el-table-column prop="remark" label="备注"></el-table-column>
        <el-table-column label="操作" width="160">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="deleteUser(scope.$index)">删除</el-button>
            <el-button size="mini" type="primary" @click="editUser(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button type="primary" @click="dialogVisible = true">新增采集</el-button>
    </div>

    <!-- 新增/编辑用户对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
      <el-form :model="currentUser" label-width="120px">
        <el-form-item label="ID">
          <el-input v-model="currentUser.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="采集批次名称">
          <el-input v-model="currentUser.batchName"></el-input>
        </el-form-item>
        <el-form-item label="采集时间">
          <el-date-picker
            v-model="currentUser.collectionTime"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="采集员">
          <el-input v-model="currentUser.collector"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="currentUser.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveUser">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  data() {
    return {
      users: [
        { id: 1, batchName: '批次1', collectionTime: new Date(), collector: '张三', remark: '备注1' },
        { id: 2, batchName: '批次2', collectionTime: new Date(), collector: '李四', remark: '备注2' },
        { id: 3, batchName: '批次3', collectionTime: new Date(), collector: '王五', remark: '备注3' }
      ],
      dialogVisible: false,
      currentUser: {
        id: '',
        batchName: '',
        collectionTime: '',
        collector: '',
        remark: ''
      },
      dialogTitle: '新增采集'
    };
  },
  methods: {
    addUser() {
      if (this.currentUser.batchName && this.currentUser.collectionTime && this.currentUser.collector) {
        this.users.push({ ...this.currentUser });
        this.resetForm();
        this.dialogVisible = false;
      } else {
        this.$message.error('请输入完整的用户信息');
      }
    },
    deleteUser(index) {
      this.users.splice(index, 1);
    },
    editUser(row) {
      this.dialogTitle = '编辑采集';
      this.currentUser = { ...row };
      this.dialogVisible = true;
    },
    saveUser() {
      if (this.dialogTitle === '新增采集') {
        this.addUser();
      } else {
        const index = this.users.findIndex(item => item.id === this.currentUser.id);
        if (index !== -1) {
          this.users[index] = { ...this.currentUser };
          this.resetForm();
          this.dialogVisible = false;
        }
      }
    },
    resetForm() {
      this.currentUser = {
        id: this.generateId(),
        batchName: '',
        collectionTime: '',
        collector: '',
        remark: ''
      };
    },
    generateId() {
      return this.users.length > 0 ? this.users[this.users.length - 1].id + 1 : 1;
    }
  },
  filters: {
    formatDate(date) {
      if (!date) return '';
      const options = { year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' };
      return date.toLocaleDateString('zh-CN', options);
    }
  },
  created() {
    this.resetForm();
  }
};
</script>

<style scoped>
table {
  border-collapse: collapse;
}

tr,
td,
th {
  border: 1px solid #ccc;
}

.box {
  display: flex;
  width: 100%;
}

.box div {
  background: #f7e9c2;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 2px 0;
  margin: 0 2px;
  margin-top: 10px;
  cursor: pointer;
}
</style>